import { Component, OnInit, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
import { RiverPanelComponent } from '../river-panel/river-panel.component';
import { DisplayService } from '../display.service';
import Overlay from 'ol/Overlay';
import { MapUiService } from '../../one-map/map-ui.service';
import { OneMapService } from '../../one-map/one-map.service';

const Points = [
  {
    name: '兰州断面',
    coordinate: [103.76706540584564, 36.084514260292053],
    waterLever: 1511.93,
    flow: 1570,
    angle: 109,
    type: 1,
    className: ''
  },
  {
    name: '刘家峡',
    coordinate: [103.34782634133013, 35.93244073762776],
    xushui: 33.3,
    ruku: 1090,
    chuku: 1140,
    type: 0,
    className: 'down'
  },
  {
    name: '龙羊峡',
    coordinate: [101.35637942433361, 36.00713446959852],
    xushui: 210,
    ruku: 503,
    chuku: 865,
    type: 0,
    eClick: true,
    className: 'down'
  },
  // {
  //   name: '青铜峡',
  //   coordinate: [105.98928913103998, 37.880523261753844],
  //   xushui: 240,
  //   ruku: 2500,
  //   chuku: 2220,
  //   type: 0,
  //   className: ''
  // },
  {
    name: '青铜峡坝下',
    coordinate: [105.98928913103998, 37.880523261753844],
    waterLever: 1230.42,
    flow: 1280,
    angle: 82,
    type: 1,
    className: ''
  },
  {
    name: '下河沿断面',
    coordinate: [105.04306197166443, 37.44938850402832],
    waterLever: 1230.42,
    flow: 1280,
    angle: 82,
    type: 1,
    eClick: true,
    className: 'down'
  },
  {
    name: '石嘴山断面',
    coordinate: [106.79706573486328, 39.29436206817627],
    waterLever: 1086.19,
    flow: 1120,
    angle: -6,
    type: 1,
    eClick: true,
    className: ''
  }
];

@Component({
  selector: 'app-river',
  templateUrl: './river.component.html',
  styleUrls: ['./river.component.scss']
})
export class RiverComponent implements OnInit, AfterViewInit, OnDestroy {
  points: any[] = [];
  points2: any[] = [];
  visible = true;
  chartOpt = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: 10,
      bottom: 40,
      left: 35,
      right: 35
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff'
        }
      },
      axisLine: {       // x轴
        show: false
      },
      axisTick: {       // x轴刻度线
        show: false
      },
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value',
      axisLine: {       // y轴
        show: false
      },
      axisTick: {       // y轴刻度线
        show: false,

      },
      axisLabel: {
        formatter: () => {
          return '';
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#ffffff',
          opacity: 0.25
        }
      }
    },
    series: [
      {
        name: '引水指标',
        type: 'bar',
        color: '#A1FFFE',
        data: [0.01, 0.01, 0.01, 6.11, 10.99, 0, 0, 0, 0, 0, 0, 0]
      },
      {
        name: '耗水指标',
        type: 'bar',
        color: '#FFF5CD',
        data: [0.00, 0.00, 0.00, 4.56, 7.09, 0, 0, 0, 0, 0, 0, 0]
      }
    ]
  };

  chartMergeOpt;
  waterType = '1';

  videos: any[] = [
    {
      // 沙坡头水利工程坝址
      id: '58c70d85269c4c74a9ff78381b3a688d',
      imgSrc: 'video1.png'
    },
    {
      // 青铜峡坝上1KM
      id: '6d5f1b4ce726475e9bcb476180f94317',
      imgSrc: 'video2.png'
    },
    {
      // 石嘴山黄河大桥上游1.5km
      id: '35e64aa27e5c40a8b6ff18bd8de6c80e',
      imgSrc: 'video3.png'
    },
    // {
    //   id: 'a659467838284841946268036a6e09ec',
    //   imgSrc: 'video4.png'
    // }
  ];
  arrowToggle: boolean = false;
  clickNameArr: string[] = ['石嘴山', '下河沿', '龙羊峡'];
  downNameArr: string[] = ['下河沿', '龙羊峡', '刘家峡'];
  angleMapper: any = {
    '兰州': 109,
    '下河沿': 82,
    '石嘴山': -6,
  };

  constructor(private dispService: DisplayService, private mapUiService: MapUiService, private elementRef: ElementRef, private mapService: OneMapService) {
  }

  ngOnInit(): void {
    this.dispService.typeChange.next('river');
    // this.dispService.createSidePane(null);
    // this.dispService.createSidePane(RiverPanelComponent);
    // 黄河断面
    this.mapService.getMonitorRiver({
      "stadiaType": "7"
    }).subscribe(res => {
      this.points2 = res['list'].map(p => {
        p.eClick = this.clickNameArr.indexOf(p.stadiaName) > -1;
        p.className = this.downNameArr.indexOf(p.stadiaName) > -1 ? 'down' : '';
        p.angle = this.angleMapper[p.stadiaName];
        return p;
      });
    });
    this.mapService.getMonitorReservior({}).subscribe(res => {
      this.points = res['list'].map(p => {
        p.eClick = this.clickNameArr.indexOf(p.stadiaName) > -1;
        p.className = this.downNameArr.indexOf(p.stadiaName) > -1 ? 'down' : '';
        return p;
      });
    });
  }

  ngAfterViewInit(): void {
    this.mapUiService.getMapInstance().then(() => {
      setTimeout(() => {
        this.points.map((p, i) => {
          const point = this.elementRef.nativeElement.querySelector(`.point${i}`);
          this.dispService.addOverlay(point, [p.geom.lng, p.geom.lat]);
        });
        this.points2.map((p, i) => {
          const point = this.elementRef.nativeElement.querySelector(`.point2_${i}`);
          this.dispService.addOverlay(point, [p.geom.lng, p.geom.lat]);
        });
      }, 1000);
    });
  }

  ngOnDestroy(): void {
    this.dispService.clearOverlay();
  }

  tabChange(type): void {
    this.waterType = type;
    const chartData = {
      '1': {
        target: [0.26, 0.24, 0.47, 6.49, 12.78, 14.97, 14.02, 12.87, 1.50, 1.76, 9.69, 0.06],
        real: [0.08, 0.08, 0.05, 5.47, 9.31, 10.52, 12.73, 8.84, 1.12, 1.22, 9.45, 0.03]
      },
      '2': {
        target: [0, 0, 0.03, 4.87, 8.08, 12.17, 12.13, 10.67, 1.44, 1.72, 7.40, 0],
        real: [0.08, -1.95, -2.26, 5.16, 5.44, 9.85, 7.91, 6.06, -0.89, -0.11, 7.74, -1.58]
      }
    };
    if (type == '1') {
      this.chartMergeOpt = {
        series: [
          {
            name: '引水指标',
            type: 'bar',
            color: '#A1FFFE',
            data: [0.01, 0.01, 0.01, 6.11, 10.99, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '实际引水',
            type: 'bar',
            color: '#FFF5CD',
            data: [0.03, 0.08, 0.36, 5.54, 8.72, 0, 0, 0, 0, 0, 0, 0]
          }
        ]
      };
    }

    if (type == '2') {
      this.chartMergeOpt = {
        series: [
          {
            name: '耗水指标',
            type: 'bar',
            color: '#A1FFFE',
            data: [0, 0, 0, 4.56, 7.09, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '实际耗水',
            type: 'bar',
            color: '#FFF5CD',
            data: [-1.63, -1.06, -2.03, 4.77, 7.42, 0, 0, 0, 0, 0, 0, 0]
          }
        ]
      };
    }

  }
}
